<template>
  <el-row style="height: 100%">
    <el-row style="height: 10%;border-bottom-style: solid;border-bottom-color: #e6e6e6">
      <Header></Header>
    </el-row>
    <el-row style="height: 90%">
      <el-col :span="4" style="height: 100%;">
        <Navigator></Navigator>
      </el-col>
      <el-col :span="20" style="border-top: 1px solid #2c3e50;padding: 0;height: 100%">
        <el-row>
          <h2>《运输者》操作页面</h2>
        </el-row>
        <el-row :gutter="20" style="margin-top: 10px">
          <el-col :span="2" :offset="1" style="text-align: center">
            <span style="font-size: 22px">
               订单编号:
            </span>
          </el-col>
          <el-col :span="6" >
            <el-input type="primary" v-model="id"></el-input>
          </el-col>
          <el-col :span="2">
            <el-button type="primary" @click="showSearchDialog">搜索</el-button>
          </el-col>
          <el-col :span="2">
            <el-button type="primary" @click="showInputDialog">新增</el-button>
          </el-col>
        </el-row>
        <el-divider></el-divider>
        <el-row>
          <el-col :span="22" :offset="1">
            <el-row style="margin-bottom: 10px">
              <el-col :span="1">
                <el-button type="primary" @click="queryOrder(0)">刷新</el-button>
              </el-col>
            </el-row>
            <el-table :data="tableData" border width="100%">
              <el-table-column prop="block_height" label="区块高度" width="100"></el-table-column>
              <el-table-column prop="block_time_stamp" label="时间戳" width="190"></el-table-column>
              <el-table-column prop="order_no" label="订单编号" width="100px"></el-table-column>
              <el-table-column prop="transport_no" label="运输订单编号" width="120px"></el-table-column>
              <el-table-column prop="order_type" label="订单类型" ></el-table-column>
              <el-table-column prop="num" label="订单数量" ></el-table-column>
              <el-table-column prop="from_place" label="运输起始地" width="100px"></el-table-column>
              <el-table-column prop="to_place" label="运输目的地" width="100px"></el-table-column>
              <el-table-column prop="tx_hash" label="交易哈希" width="600px"></el-table-column>
            </el-table>
            <el-pagination background layout="prev,pager,next" :page-size="10"
                           :total=total style="margin-top: 20px" @current-change="handleCurrentChange"></el-pagination>
          </el-col>
        </el-row>
        <el-dialog title="搜索运输订单详情页面" :visible.sync="searchDialogShow" append-to-body>
          <el-form :model="searchShippers" label-width="150px" style="width: 400px;margin: 0 auto">
            <el-form-item label="总订单编号:">
              {{searchShippers.order_no}}
            </el-form-item>
            <el-form-item label="运输订单编号:">
              {{searchShippers.transport_no}}
            </el-form-item>
            <el-form-item label="订单类型:">
              {{searchShippers.order_type}}
            </el-form-item>
            <el-form-item label="运输数量(按规格):">
              {{searchShippers.num}}
            </el-form-item>
            <el-form-item label="起始地:">
              {{searchShippers.from_place}}
            </el-form-item>
            <el-form-item label="目的地:">
              {{searchShippers.to_place}}
            </el-form-item>
            <el-form-item label="更新时间:">
              {{searchShippers.update_time}}
            </el-form-item>
            <el-form-item label="订单用户地址:">
              {{searchShippers.user_address}}
            </el-form-item>
          </el-form>
        </el-dialog>
        <el-dialog title="添加运输订单页面" :visible.sync="inputDialogShow" append-to-body>
          <el-form :model="inputShippers" label-width="150px" style="width: 400px;margin: 0 auto">
            <el-form-item label="总订单编号:">
              <el-input type="primary" v-model="inputShippers.order_no"></el-input>
            </el-form-item>
            <el-form-item label="订单类型:">
              <el-input type="primary" v-model="inputShippers.order_type"></el-input>
            </el-form-item>
            <el-form-item label="运输数量(按规格):">
              <el-input type="primary" v-model="inputShippers.num"></el-input>
            </el-form-item>
            <el-form-item label="起始地:">
              <el-input type="primary" v-model="inputShippers.from_place"></el-input>
            </el-form-item>
            <el-form-item label="目的地:">
              <el-input type="primary" v-model="inputShippers.to_place"></el-input>
            </el-form-item>
          </el-form>
          <el-button type="primary" @click="inputOrder">新增</el-button>
        </el-dialog>
      </el-col>
    </el-row>
  </el-row>

</template>

<script>
import Header from "@/components/Header";
import Navigator from "@/components/Navigator";
export default {
  name: "shippers",
  data(){
    return{
      searchDialogShow : false,
      inputDialogShow : false,
      id:0,
      total:0,
      searchShippers:{
        order_no:'',
        transport_no:'',
        order_type:'',
        num:0,
        from_place:'',
        to_place:'',
        update_time:'',
        user_address:''
      },
      inputShippers:{
        order_no:'',
        order_type:'',
        num:0,
        from_place:'',
        to_place:'',
        update_time:'',
        user_address:''
      },
      tableData:[]
    }
  },
  components: {
    Header,
    Navigator
  },
  mounted(){
    this.queryOrder(0)
  },
  methods:{
    showSearchDialog() {
      this.searchDialogShow = true
      let postData = {
        id : this.id
      }
      this.axios.post('/get_ship_order', postData, {
        headers: {
          'content-type':'application/json',
          'token':this.$cookies.get("token")
        }
      }).then((res) => {
        if (res.data.code == 200) {
          this.searchShippers = res.data.data
          console.log(this.searchShippers)
        }
      })
    },
    showInputDialog() {
      this.inputDialogShow = true
    },
    inputOrder() {
      this.axios.post('/create_ship_order', this.inputShippers,{
        headers: {
          'content-type':'application/json',
          'token':this.$cookies.get("token")
        }
      }).then((res) => {
        if (res.data.code == 200) {
          alert("新增数据成功!")
        }
      })
    },
    queryOrder(new_page) {
      this.axios.post('/query_transport_order', {
        input_page: new_page
      }, {
        headers: {
          'content-type':'application/json',
          'token':this.$cookies.get("token")
        }
      }).then((res) => {
        if (res.data.code == 200) {
          this.tableData = res.data.data.list
          this.total = res.data.data.total
          console.log(this.tableData)
        }
      })
    },
    handleCurrentChange(page) {
      this.queryOrder(page)
    }
  }
}
</script>

<style scoped>
.container{
  height: 100%;
  width: 100%;
  position: fixed;
}
.aside{
  background-color: #545c64;
}
.main{
  background-color: #fff;
}
.form{
  width: 400px;
  margin: 0 auto;
}
</style>